<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini" style="margin-bottom: -18px;">
        <el-form-item label="名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="名称" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="标识" prop="perms">
          <el-input v-model="searchForm.perms" placeholder="标识" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchFormSubmit">
            <d2-icon name="search" /> 查询
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleSearchFormReset">
            <d2-icon name="refresh" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="add">
      新增
    </el-button>
    <el-button v-if="multipleSelection.length>0" type="danger" size="mini" icon="el-icon-delete" @click="batchDel">
      删除
    </el-button>
    <el-popover placement="top-start" title="温馨提示" width="200" trigger="hover">
      <li>121212</li>
      <el-button slot="reference" size="mini" icon="el-icon-info" style="float:right">
        操作提示
      </el-button>
    </el-popover>
    <el-table :data="tableData" v-loading="loading" size="small" stripe highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="名称" prop="name" sortable="custom">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>

      <el-table-column label="标识" prop="perms" sortable="custom" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.perms}}
        </template>
      </el-table-column>

      <el-table-column label="描述" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.remark}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" title="编辑" size="mini" icon="el-icon-edit" circle @click="openEditForm(scope.row)"></el-button>
          <el-button type="danger" title="删除" size="mini" icon="el-icon-delete" circle @click="delRole(scope.row.id)"></el-button>
          <el-button type="warning" title="用户列表" size="mini" icon="el-icon-share" circle @click="openRoleUserDialog(scope.row)"></el-button>
          <el-button title="权限" size="mini" icon="el-icon-setting" circle @click="openPermissionDialog(scope.row)"></el-button>
        </template>
      </el-table-column>

    </el-table>
    <template slot="footer">
      <el-pagination :current-page="page.current" :page-size="page.size" :total="page.total" :page-sizes="[1,100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" style="margin: -10px;" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </template>
    <edit-form :role="role" v-model="editFormVisible" @submit="submit" />
    <role-permission :role="role" v-model="permissionDialogVisible"  @submit="submit" />
    <role-user :role="role" v-model="roleUserDialogVisible"  @submit="submit" />
  </d2-container>
</template>
<script>
import * as roleService from '@/api/sys/role'
import editForm from './components/form'
import rolePermission from './components/permission'
import roleUser from './components/users'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'RolePage',
  components: { editForm, rolePermission, roleUser },
  data () {
    return {
      searchForm: {},
      loading: false,
      tableData: [],
      multipleSelection: [],
      page: {
        current: 1,
        size: 100,
        total: 0
      },
      sort: {
        prop: '',
        order: ''
      },
      role: { id: '', name: '' },
      editFormVisible: false,
      permissionDialogVisible: false,
      roleUserDialogVisible: false
    }
  },
  mounted () {
    this.getTableData()
  },
  computed: {
    ...mapState('d2admin/permission', [
      'router'
    ])
  },
  methods: {
    ...mapActions('d2admin/permission', ['reload']),
    getTableData () {
      let query = {
        page: this.page.current,
        pageSize: this.page.size,
        sortBy: this.sort.prop,
        descending: this.sort.order === 'descending',
        filter: this.searchForm
      }
      roleService.getRolePagedList(query).then(data => {
        this.tableData = data.data
        this.page.total = data.total
      })
    },
    handleSearchFormSubmit () {
      this.getTableData()
    },
    handleSearchFormReset () {
      this.$refs.searchForm.resetFields()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSortChange (val) {
      this.sort.prop = val.prop
      this.sort.order = val.order
      this.getTableData()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.getTableData()
    },
    delRole (id) {
      this.$confirm('确认删除？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        roleService.delRoles([id]).then(() => {
          this.getTableData()
          this.submit()
        })
      })
    },
    batchDel () {
      this.$confirm('确认删除？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        roleService
          .delRoles({
            ids: this.multipleSelection.map(s => s.id)
          })
          .then(() => {
            this.getTableData()
            this.submit()
          })
      })
    },
    openEditForm (role) {
      this.role = role
      this.editFormVisible = true
    },
    add () {
      this.role = {}
      this.editFormVisible = true
    },
    openPermissionDialog (role) {
      this.role = role
      this.permissionDialogVisible = true
    },
    openRoleUserDialog (role) {
      this.role = role
      this.roleUserDialogVisible = !this.roleUserDialogVisible
    },
    async submit () {
      await this.reload()
      this.$router.addRoutes(this.router)
    }
  }
}
</script>
